<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
            padding-left: 30px;
        }
        .box{
            border: 1px solid black;
            width: 500px;
            height: 500px;
            position: relative;
        }
        .pot{
            width: 50px;
            height: 50px;
            background-color: burlywood;
            box-shadow: 0 0 8px #999;
            position: absolute;
            transition: all 300ms ease;
        }
    </style>
</head>
<body>
    <div id="app">
        <h3>事件指令v-on 基础用法</h3>
        <!-- 
            v-on 实现为标签提供事件绑定的相关操作，可以通过关键字 @ 替换 v-on
            语法： v-on:事件名="执行回调"
                   @事件名="执行回调"
        -->
        <input type="button" value="showTip()" v-on:click="showTip()">
        <input type="button" value="showTip" v-on:click="showTip">
        <input type="button" value="showTip()" @click="showTip()">
        <input type="button" value="showTip" @click="showTip">
        <br><br>
        <input type="button" value="js常规方法的绑定" onclick="printMun()">
        <br><br>
        <p>name:{{ name }}</p>
        <input type="button" value="常规事件随机名称" onclick="changeName()">
        <input type="button" value="vue事件随机名称" @click="changeName()">
        <input type="button" value="vue事件随机名称" @click="changeName">
        
        <h3>事件指令v-on 参数规则</h3>
        <!-- 
        基本参数和常规js使用规则一致
            + 变量参数 : vue事件绑定只能加载仓库中的变量
            + 匿名变量，表达式 : vue事件绑定时传入的匿名参数、表达式参数规则等同于JS规则
            + 页面this参数 vue事件绑定时传入页面this关键字参数，不再指向于DOM对象，而是vue的实例对象
                           ==> 所以基于JS页面this指向DOM的规则，开发的操作功能，在vue语法中全部失效
            + event事件源参数【js提供的事件触发时，用于记录事件类型和相关数据的对象】
                          ==> vue的事件绑定中如果需要通过页面参数传递事件源对象，必须使用vue关键字 $event
                          ==> target 事件触发的DOM对象
        -->
        <input type="button" value="printArgs-变量" @click="printArgs(msg)"> <br>
        <input type="button" value="printArgs-匿名变量" @click="printArgs(100,'字符串',[1,2,3],true,{a:1},new Date())"> <br>
        <input type="button" value="printArgs-表达式" @click="printArgs( 100+200,user.name )"> <br>
        <input type="button" value="printArgs-this" @click="printArgs( this )"> <br>
        <input type="button" value="printArgs-event" @click="printArgs( $event )"> <br>
        <p>text:{{ text }}</p>
        <input type="text" @input="setText( $event.target.value )">
        <hr>
        <div class="box" @click="setXY($event)">
            <div class="pot" v-bind:style="`top:${y}px;left:${x}px`"></div>
        </div>
    </div>
    <script src="../assets/mock/mock-min.js"></script>
    <script>
        let msg = "window下的msg变量"
        function printMun(){
            console.log( Math.random() )
        }
    </script>
    <script type="module">
        // 加载 Vue3 的ESM 模块文件
        import { createApp } from "../assets/vue3/vue.esm-browser.js"
        let vm = createApp({
            data(){
                return {
                    // showTip:function(){
                    //     alert("1")
                    // }
                    name:"张三",
                    msg:"vue仓库变量msg",
                    user:{
                        name:"李四"
                    },
                    text:"",
                    x:0,
                    y:0
                }
            },
            methods:{
                showTip:function(){
                    alert("1")
                },
                changeName(){
                    this.name = Mock.mock("@cname")
                },
                printArgs(...args){
                    console.log(args)
                },
                setText(nv){
                    // console.log(nv);
                    this.text = nv;
                },
                setXY(e){
                    console.log(e.offsetX,e.offsetY);
                    this.x = e.offsetX
                    this.y = e.offsetY
                }
            }
        }).mount("#app")

        console.log(vm)
        // vm = null;

        window.changeName = function(){
            console.log(1)
            vm.name = Mock.mock("@cname")
        }
    </script>
</body>
</html>